<div class="navbar" id="navbar">
    <div class="navbar-inner">
        <a class="logo" href="${domain}"><span></span>创新研发中心</a>
        <ul class="navbar-list clearfix" id="navbarList">
            <li id="index"><a href="${domain}">首页</a></li>
            <li id="service">
                <a href="${domain}/service.html">创硏服务<span class="i-border-arrow"></span></a>
                <div class="navbar-menu">
                    <div class="navbar-menu-inner" id="menu">
                        <ul class="navbar-menu01">
                            <li class="current"><a href="javascript:;">产品 &gt;</a></li>
                            <!--<li><a href="javascript:;">技术 &gt;</a></li>-->
                        </ul>
                        <div class="navbar-menu02">
                            <ul style="display: block;">
                                <li class="current">
                                    <a href="javascript:;">文化领域 &gt;</a>
                                    <ul class="navbar-menu03">
                                        <li>
                                            <a href="http://www.51kupai.com/" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/kp.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="http://www.51kupai.com/" target="_blank">库拍</a>
                                            </h2>
                                        </li>

                                        <li>
                                            <a href="http://51shizhong.com/" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/szjs.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="http://51shizhong.com/" target="_blank">时钟教室</a>
                                            </h2>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="javascript:;">房产领域 &gt;</a>

                                    <ul class="navbar-menu03">

                                        <li>
                                            <a href="https://fangjs.sina.com.cn/" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/fjs.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="https://fangjs.sina.com.cn/" target="_blank">房金所</a>
                                            </h2>
                                        </li>

                                        <li>
                                            <a href="http://www.fangyou.com" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/fy.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="http://www.fangyou.com" target="_blank">房友</a>
                                            </h2>
                                        </li>

                                        <li>
                                            <a href="http://www.51zb.cn/" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/sb.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="http://www.51zb.cn/" target="_blank">首播</a>
                                            </h2>
                                        </li>

                                        <li>
                                            <a href="http://www.ejucloud.com/" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/yy.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="http://www.ejucloud.com/" target="_blank">云眼</a>
                                            </h2>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <a href="javascript:;">经济领域 &gt;</a>

                                    <ul class="navbar-menu03">

                                        <li>
                                            <a href="https://www.yjyyun.com/" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/yjyy.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="https://www.yjyyun.com/" target="_blank">壹加壹云</a>
                                            </h2>
                                        </li>

                                        <li>
                                            <a href="http://www.jpinvestment.cn/" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/jpzx.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="http://www.jpinvestment.cn/" target="_blank">钜派在线</a>
                                            </h2>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <a href="javascript:;">生活领域 &gt;</a>

                                    <ul class="navbar-menu03">
                                        <li>
                                            <a href="" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/lc.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="" target="_blank">Clicker遛宠</a>
                                            </h2>
                                        </li>

                                        <li>
                                            <a href="" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/ye.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="" target="_blank">壹二</a>
                                            </h2>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <a href="javascript:;">工作领域 &gt;</a>

                                    <ul class="navbar-menu03">
                                        <li>
                                            <a href="http://www.17youyun.com/" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/yytx.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="http://www.17youyun.com/" target="_blank">游云通讯</a>
                                            </h2>
                                        </li>

                                        <li>
                                            <a href="" target="_blank" class="navbar-menu03-img">
                                                <img src="${domain}/static/images/yjr.png" />
                                            </a>
                                            <h2 class="ellipsis">
                                                <a href="" target="_blank">易家人</a>
                                            </h2>
                                        </li>

                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li id="joinus" class="navbar-join">
                <a href="${domain}/joinus.html">招募精英<span class="i-border-arrow"></span></a>
                <div class="navbar-menu">
                    <div class="navbar-menu-inner">
                        <ul class="navbar-menu-line">
                            <li id="joinus-2"><a href="${domain}/joinus.html">招聘职位</a></li>
                            <li id="joinus-1"><a href="${domain}/showus.html">员工风采</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li id="event"><a href="${domain}/event.html">创硏动态</a></li>
            <li id="aboutus"><a href="${domain}/aboutus.html">关于我们</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    window.addEventListener('load', function(){
        var oNavbar = document.querySelector("#navbar");
        var aNavList = oNavbar.querySelectorAll(".navbar-list > li");
        var aNavMenu = oNavbar.querySelectorAll(".navbar-menu");
        var oMenu01 = document.querySelector(".navbar-menu01");
        var aMenu01Li = document.querySelectorAll(".navbar-menu01 > li");
        var aMenu02Ul = document.querySelectorAll(".navbar-menu02 > ul");
        var aMenu02Li = document.querySelectorAll(".navbar-menu02 > ul > li");
        var aMenu03Ul = document.querySelectorAll(".navbar-menu03");


        function current(e, aMenu, ele){
            //current状态
            for(var i = 0; i < aMenu.length; i++){
                aMenu[i].index = i;
                aMenu[i].className = "";
            }
            e.currentTarget.className = "current";

            //判断显示左边第二栏
            if(ele){
                for(var n = 0; n < ele.length; n++) ele[n].style.display = "none";

                if(ele[e.currentTarget.index]){
                    ele[e.currentTarget.index].style.display = "block";
                }
            }
        };

        //点击左一显示左二
        for(var i = 0; i < aMenu01Li.length; i++){
            aMenu01Li[i].addEventListener("click", function(e){
                current(e,aMenu01Li, aMenu02Ul);
            }, false);
        }

        for(var i = 0; i < aMenu02Li.length; i++){
            aMenu02Li[i].addEventListener("click", function(e){
                current(e, e.currentTarget.parentNode.querySelectorAll("li"));
            }, false);

            aMenu02Li[i].addEventListener("mouseover", function(e){
                current(e, e.currentTarget.parentNode.querySelectorAll("li"));
            }, false);
        }
    })
</script>